<!DOCTYPE html>
<html>
<head>
    <title>{$site_name}</title>
    <meta name="keywords" content="{$site_seo_keywords}"/>
    <meta name="description" content="{$site_seo_description}">
    <meta name="author" content="ThinkCMF">
    <tc_include file="Public:head"/>
    <style>
        .border2px {
            border: 2px solid #fff;
        }
        .sms_code_but {
            border: 1px transparent;
            width: 90px;
            background-color: white;
            padding: 7px 0px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            position: absolute;
        }
        .path span {
            font-weight: bold;
            letter-spacing: 1px;
            color: #000232;
        }
        .path .path_active {
            color: #000232;
            opacity: .58;
            filter: alpha(opacity=58);
        }
        .path span {
            font-weight: bold;
            letter-spacing: 1px;
            color: #000232;
        }
        .path .path_active {
            color: #000232;
            opacity: .58;
            filter: alpha(opacity=58);
        }
        .forget_password {
            position: absolute;
            height: 38px;
            top: 0;
            left:208px;
            color: #000232;
            font-size: 14px;
            line-height: 38px;
            cursor: pointer;
            /*background: #fff;*/
            font-weight: bolder;
            width: 93px;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            letter-spacing: 1px;
            /*font-weight: 600;*/

        }
        @media screen and (max-width: 750px) {
            .mobile_bg {
                background-image: url("{:sp_get_asset_upload_path('http://video.rixins.com/image/default/CCABCCCF0C5B4A209E7786133C81AC14-6-2.png')}");
            }
            body {
                padding: 0;
                margin: 0;
                overflow: hidden;
            }
            .tp img {
                height: 2.4rem!important;
            }
            .navbar {
                display: none;
            }

            .control-group input {
                height: 2.5rem;
            }

            .sms_code_but {
                height: 25px;
                margin-top: 1px;
            }
            .pinding_ok {
                height: 42px;
            }
            .yzm_ipt{
                height: 26px!important;
                /*40*/
            }
            .yzm_ipt1 {
                height: 40px!important;

            }
        }
        @media screen and (min-width: 750px) {
            .mobile_bg {
                background-image:url("{:sp_get_asset_upload_path('http://video.rixins.com/image/default/44FEBEDB4CD84F99A9F13678A51AD485-6-2.jpg')}");
            }
            .control-group {
                width: 302px!important;
            }
            .input_username2 {
                width:288px!important;
            }
        }
        #login_binding_content {
            margin-bottom: 12px;
        }
    </style>
</head>

<body class="body-white">
<tc_include file="Public:nav"/>

<div class="container tc-main loginmain mobile_bg" style="min-height: 731px;">
    <div class="logindiv logindiv_position normal_login" style="display: none;margin-top: -160px;">
        <form class="form-horizontal js-ajax-form" action="{:U('user/login/dologin')}" method="post">
            <div class="path ">
                <span>账号登录</span>
                <span><a href="{:leuu('user/register/index')}" class="path_active">新用户注册</a></span>
            </div>

            <div class="control-group" >
                <input type="text" id="input_username" name="username" placeholder="手机号/用户名" class="span4" required>

            </div>

            <div class="control-group" style="position: relative;">
                <input type="password" id="input_password" name="password" placeholder="密码" class="span4" required>
                <p class="forget_password">忘记密码</p>
            </div>
            <div class="control-group " style="height: 40px;">
                <div class="yzm">
                    <input type="text" class="yzm_ipt yzm_ipt1 span4" name="verify" placeholder="验证码">
                    <span class="tp">{:sp_verifycode_img('length=4&font_size=14&width=100&height=34&charset=1234567890&use_noise=1&use_curve=0')}</span>
                </div>
            </div>

            <div class="control-group" style="">
                <button class="dltj btn btn-primary js-ajax-submit span4" type="submit" style="width: 300px;font-size: 16px;height: 41px;background-color: #c8161d;">登&nbsp;&nbsp;录</button>
            </div>

            <div class="control-group wx_login">
                <img src="./public/images/wx_login.svg">
            </div>
        </form>
    </div>
    <!--提示关联手机号页面-->
    <div class="logindiv logindiv_position bind_new_user" style="display: none;margin-top: -176px;">
        <div class="login_binding">
            <div>
                <img src="{:sp_get_user_avatar_url($wx_user_info['avatar'])}?t={:time()}" alt="">
            </div>
            <p class="welcome_name">
                <span>欢迎，</span>
                <span>{$wx_user_info.nickname}</span>
            </p>
        </div>
        <div class="control-group">
            <button class="dltj btn btn-primary span4 new_weixin_user"  style="width: 300px;font-size: 16px;height: 41px;background-color: #c8161d;letter-spacing:2px ;">关联新账户</button>
        </div>
        <div class="control-group" id="login_binding_content">
            <a href="javascritp:;">
                <button class="dltj btn btn-primary span4"  style="width: 300px;font-size: 16px;height: 41px;background-color: #c8161d;letter-spacing:2px ;">关联已有账户</button>
            </a>
        </div>
    </div>


    <!--忘记密码layer弹出层-->
    <div class="layer_groud logindiv_pinding_page1" style="display: none;">
        <div class="layer_groud_center">
            <div class="form_div">
                <div class="layer-input mobile_div">
                    <input type="text" name='mobile' placeholder="手机号">
                </div>
                <div class="layer-input sms_div" style="position: relative;">
                    <input type="text" name="sms_code" placeholder="动态验证码">
                    <span class="sms_code_but" >点击获取</span>
                </div>
                <div class="layer-input">
                    <input type="text" name="password" placeholder="输入新密码">
                </div>
                <div class="layer-input">
                    <input type="text" name="repassword" placeholder="确认新密码">
                </div>
                <button class="btn forget_password_btn" data-url="{:U('User/Login/forget_password')}">完成并登录</button>
            </div>
        </div>
    </div>

    <!--绑定账户layer弹出层-->
    <div class="layer_groud logindiv_pinding_page2" style="display: none;">
        <div class="layer_groud_center">
            <div class="form_div">
                <h3>请输入已有账号的手机号</h3>

                <input type="hidden" name="avatar" value="{$wx_user_info.avatar}">
                <input type="hidden" name="unionid" value="{$wx_user_info.unionid}">
                <input type="hidden" name="oa_openid" value="{$wx_user_info.oa_openid}">
                <input type="hidden" name="op_openid" value="{$wx_user_info.op_openid}">
                <input type="hidden" name="mn_openid" value="{$wx_user_info.mn_openid}">

                <div class="layer-input mobile_div">
                    <input type="text" name='mobile' placeholder="手机号">
                </div>
                <div class="layer-input sms_div" style="position: relative;">
                    <input type="text" name="sms_code" placeholder="动态验证码">
                    <span class="sms_code_but">点击获取</span>
                </div>
                <button class="btn bind_new_user_btn" data-url="{:U('User/Register/new_weixin_bind')}">完成并登录</button>
            </div>
        </div>
    </div>
</div>

<!-- /container -->
<tc_include file="Public:footer"/>
<tc_include file="Public:scripts"/>
<script src="__PUBLIC__/js/layer/layer_1.js"></script>

<script>
    var is_bind_user = "{$new_weixin_user}";
    var user_id      = "{:sp_get_current_userid()}";
    if (is_bind_user > 0) {
        // 新用户，提示绑定
        if (user_id > 0) {
            var redirect_url = "{$redirect_url}";
            window.location.href = redirect_url ? redirect_url : '/';
        } else {
            $('.bind_new_user').css('display', 'block');
        }
    } else {
        // 普通登录
        $('.normal_login').css('display', 'block');
    }

    // 绑定用户请求
    $('.bind_new_user_btn').click(function () {
        var avatar      = $(this).parents('.form_div').find('input[name="avatar"]').val();
        var mobile      = $(this).parents('.form_div').find('input[name="mobile"]').val();
        var sms_code    = $(this).parents('.form_div').find('input[name="sms_code"]').val();
        var unionid     = $(this).parents('.form_div').find('input[name="unionid"]').val();
        var oa_openid   = $(this).parents('.form_div').find('input[name="oa_openid"]').val();
        var op_openid   = $(this).parents('.form_div').find('input[name="op_openid"]').val();
        var mn_openid   = $(this).parents('.form_div').find('input[name="mn_openid"]').val();
        var url         = $(this).attr('data-url');

        $.get(url, {avatar : avatar, mobile : mobile, sms_code : sms_code, unionid : unionid, oa_openid : oa_openid, op_openid : op_openid, mn_openid : mn_openid}, function (re) {
            layer.msg(re.info);
            if (re.status) {
                setTimeout(function () {
                    var redirect_url = "{$redirect_url}";
                    window.location.href = redirect_url ? redirect_url : '/';
                }, 2000);
            }
        });
    });

    // 忘记密码
    $('.forget_password_btn').click(function () {
        var mobile      = $(this).parents('.form_div').find('input[name="mobile"]').val();
        var sms_code    = $(this).parents('.form_div').find('input[name="sms_code"]').val();
        var password    = $(this).parents('.form_div').find('input[name="password"]').val();
        var repassword  = $(this).parents('.form_div').find('input[name="repassword"]').val();
        var url         = $(this).attr('data-url');

        $.post(url, {password : password, mobile : mobile, sms_code : sms_code, repassword : repassword}, function (re) {
            layer.msg(re.info);
            if (re.status) {
                setTimeout(function () {
                    var redirect_url = "{$redirect_url}";
                    window.location.href = redirect_url ? redirect_url : '/';
                }, 2000);
            }
        });
    });

    // 关联新账号
    $('.new_weixin_user').click(function () {
        $.post("{:U('Wx/WxLogin/new_weixin_user')}", {
            unionid     : "{$wx_user_info['unionid']}",
            avatar      : "{$wx_user_info['avatar']}",
            nickname    : "{$wx_user_info['nickname']}",
            sex         : "{$wx_user_info['sex']}",
            oa_openid   : "{$wx_user_info['oa_openid']}",
            op_openid   : "{$wx_user_info['op_openid']}",
            mn_openid   : "{$wx_user_info['mn_openid']}",
        }, function (re) {
            layer.msg(re.info);
            if (re.status) {
                setTimeout(function () {
                    var redirect_url = "{$redirect_url}";
                    window.location.href = redirect_url ? redirect_url : '/';
                }, 2000);
            }
        });
    });

</script>

<script>
    var  screenW = window.screen.width;
    $(".forget_password").click(function () {
        if(screenW < 751){
            layer.open({
                type: 1,
                title: false,
                area:['90%',"460px"],
                closeBtn: 1,
                shadeClose: true,
                skin: 'yourclass',
                content: $(".logindiv_pinding_page1"),
            });
        } else {
            layer.open({
                type: 1,
                title: false,
                area:['900px',"460px"],
                closeBtn: 1,
                shadeClose: true,
                skin: 'yourclass',
                content: $(".logindiv_pinding_page1"),
            });
        }
    });

    $("#login_binding_content").click(function () {
        if (screenW < 751) {
            layer.open({
                type: 1,
                title: false,
                area:['90%',"460px"],
                closeBtn: 1,
                shadeClose: true,
                skin: 'yourclass',
                content: $(".logindiv_pinding_page2"),
            });
        } else{
            layer.open({
                type: 1,
                title: false,
                area:['900px',"460px"],
                closeBtn: 1,
                shadeClose: true,
                skin: 'yourclass',
                content: $(".logindiv_pinding_page2"),
            });
        }

    });
</script>
<script>
    var sending = false;
    var timer   = 0;
    var sec     = 0;
    var sms_btn = '';

    $('.sms_code_but').click(function () {
        if (!sending) {

            var _this   = $(this);
            var phone   = $(this).parents('.sms_div').siblings('.mobile_div').find("input[name='mobile']").val();

            if (!isPhoneAvailable(phone)) {
                layer.msg("请输入正确的手机号");
                return;
            }

            $.post("{:U('User/Public/send_aliyun_sms')}", {phone : phone}, function (re) {
                if (re.status) {
                    layer.msg(re.info);
                    sending = true;
                    sec     = 60;
                    sms_btn = _this;
                    timer   = setInterval('change_sms_but()', 1000);
                    change_sms_but();

                } else {
                    layer.msg(re.info);
                }
            })
        }
    });

    function change_sms_but() {
        if (sec == 1) {
            sms_btn.html("点击获取");
            clearInterval(timer);
            sending = false;
            sec     = 60;
            sms_btn = '';
        } else {
            sec--;
            sms_btn.html(sec + 's后获取');
        }
    }

    function isPhoneAvailable(str) {
        var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        if (!myreg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
</script>

<script>
    $('document').ready(function () {
        $('.wx_login').click(function () {
            var ua          = navigator.userAgent.toLowerCase();
            var isWeixin    = ua.indexOf('micromessenger') != -1;
            if (isWeixin) {
                window.location.href = "{$wx_login_url}";
            } else {
                window.location.href = "{:U('Wx/WxLogin/login_qrcode')}";
            }
        })
    })
</script>

</body>
</html>